import React from 'react'
import './index.less'
import SubTitle from '../subTitle'

export default props => (
  <div className="prog-course-list-container-pad">
    <SubTitle title="超值礼包" color="#333333" lineColor="#006de9" />
    <div className="prog-course-list">
      {
        props.programList.map((course,i) => (
          <div key={course.packageId} className="item">
            <div className={`top top${i+1}`} style={{backgroundImage: `url(${course.coursePackageImageUrl})`}}>
              <p></p>
              <span></span>
              <i>{course.hours}课时</i>
            </div>
            <div className="bottom">
              <p>{course.courseName}</p>
              <b><span>￥</span>{course.realAmt}</b>
              <i>￥{course.amt}</i>
              <span onClick={props.createOrder(course.packageId, course.courseName, course.realAmt)}>立即购买</span>
            </div>
          </div>
        ))
      }
    </div>
  </div>
)
